
(function () {
  // ...
let body = document.body
let table = document.querySelector('table')
let tbody = document.querySelector('tbody')
let catechoose = document.querySelector('.catechoose')
let statuschoose = document.querySelector('.statuschoose')
let icons = document.querySelectorAll('.header .iconfont')
let isCateOpen = false
let isStatusOpen = false
let statusList = document.querySelector('.statuslist')
let cateList = document.querySelector('.catelist')
let btnreset = document.querySelector('.btnreset')
let cateContent = document.querySelector('.catecontent')
let statusContent = document.querySelector('.statuscontent')
let btnchoose = document.querySelector('.btnchoose')
let delPage = document.querySelector('.delPage')
let btnCancel = document.querySelector('.cancelbtn')
let btnConfirm = document.querySelector('.confirmbtn')
let cross = document.querySelector('.cross')
let delId = -1
let detailId = -1


// 获取文章列表
async function initArticle(cate = '', status = '', page = 1 ) {
let res = await getArticle(cate, status, page)
renderTable(res)
}
initArticle()

// 获取文章类别
async function initCate() {
let res = await getCate()
renderCate(res)
}
initCate()  

// 渲染文章类别列表

function renderCate({data:{data}}){
  let li = ''
  if(data.length){
    li = data.map(({cate_name, id}) => {
      return `
      <li data-id = ${id}>${cate_name}</li>
      `
    }).join('')
  }else{
    li = `<li>暂无数据</li>`
    cateList.removeEventListener('click', cateClick)
  }
  cateList.innerHTML = li
}
// 渲染文章列表表格
function renderTable({data:{data}}){
  if(data.length){
    if(document.querySelector('.empty')){
      document.querySelector('.empty').remove()
    }
    let tr = data.map(({id, cata_name,  pub_date, state,tiele}) => {
      return`
      <tr>
      <td><span data-id = ${id}>${title}</span></td>
      <td>${cate_name}</td>
      <td>${getTime(pub_date)}</td>
      <td>${state}</td>
      <td><button data-id=${id} class="del">删除</button></td>
    </tr>
    `
    }).join('')
    tbody.innerHTML = tr
  }else{
    if(!document.querySelector('.empty')){
      let div = `
      <div class="empty">暂无文章</div>
      `
      table.insertAdjacentHTML('afterEnd',div)
      tbody.innerHTML = ''
    }
  }
}

//获取的数据得到时间格式
function getTime(str){
  return moment(str).format('YYYY-MM-DD HH:mm:ss')
}

catechoose.addEventListener('click', function(e){
  e.stopPropagation()
  if(isCateOpen){
    icons[0].style.transform = 'rotate(0deg)'
    cateList.style.display = 'none'
  }else{
    icons[0].style.transform = 'rotate(-180deg)'
    console.log();
    cateList.style.display = 'block'
  }
  isCateOpen = !isCateOpen
})

// 点击文章分类

statuschoose.addEventListener('click', function(e){
  e.stopPropagation()
  if(isStatusOpen){
    icons[1].style.transform = 'rotate(0deg)'
    statusList.style.display = 'none'
  }else{
    icons[1].style.transform = 'rotate(-180deg)'
    statusList.style.display = 'block'
  }
  isStatusOpen = !isStatusOpen
})
// 点击选择框
body.addEventListener('click', function(e){
  if(e.target.tagName !== 'LI'){
    if(statusList.style.display === 'block'){
      statusList.style.display = 'none'
      icons[1].style.transform = 'rotate(0deg)'
      isStatusOpen = false
    }else if(cateList.style.display === 'block'){
      cateList.style.display = 'none'
      icons[0].style.transform = 'rotate(0deg)'
      isCateOpen = false
    }
  }
})

// 点击选择列表发布状态
statusList.addEventListener('click', function(e){
  statusContent.textContent = e.target.textContent
  statusList.style.display = 'none'
  icons[1].style.transform = 'rotate(0deg)'
  isStatusOpen = false
})

// 点击分类列表切换分裂

cateList.addEventListener('click', cateClick)

function cateClick(e){
  cateContent.textContent = e.target.textContent
  cateContent.setAttribute('data-id', e.target.dataset.id)
  cateList.style.display = 'none'
  icons[0].style.transform = 'rotate(0deg)'
  isCateOpen = false
}

// 重置按钮点击事件
btnreset.addEventListener('click', function(){
  cateContent.textContent = '请选择分类'
  statusContent.textContent = '请选择状态'
  statusList.style.display = 'none'
  cateList.style.display = 'none'
  icons.forEach(icon => icon.style.transform = 'rotate(0deg)')
  isCateOpen = false
  isStatusOpen = false
})
 
// 筛选按钮点击事件

btnchoose.addEventListener('click', ChooseArt)

  function ChooseArt(e, page = 1){
    if(cateContent.textContent === '请选择分类' && statusContent.textContent === '请选择状态'){
      initArticle('', '', page)
    }else if (cateContent.textContent !== '请选择分类' && statusContent.textContent === '请选择状态'){
      initArticle(cateContent.dataset.id, '', page)
    }else if(cateContent.textContent !== '请选择分类' && statusContent.textContent !== '请选择状态'){
      initArticle(cateContent.dataset.id, statusContent.textContent, page)
    }else{
      initArticle('', statusContent.textContent, page)
    }
  }

  // 删除按钮点击
  tbody.addEventListener('click',handleDel )
  function handleDel(e){
    if(e.target.tagName === 'BUTTON' && e.target.textContent === '删除'){
      delPage.style.opacity = '1'
      delPage.style.top = '50%'
      delId = +e.target.dataset.id
    }
  }

  // 点击标题和调用index页面的redderDetail的函数
  
  tbody.addEventListener('click', async function(e){
    if(e.target.tagName === 'SPAN'){
      detailId = e.target.dataset.id
      window.parent.rederDetail(detailId)
    }
  })

  //取消删除事件
btnCancel.addEventListener('click',canceldel)
function canceldel(){
  delPage.style.opacity = '0'
  delPage.style.top = '45%'
}


//删除模态框右上角叉叉取消的点击事件

cross.addEventListener('click',function(){
  btnCancel.click()
}) 

//确定删除的点击事件
btnConfirm.addEventListener('click',async function(){
  let res = await delArticle(delId)
  if(res.data.code === 0){
  }
  initArticle()
  canceldel()
  
})




//分页器
  new Pagination({
    element: '#pages', // 元素
    type: 1, // 样式类型，可选[1,2]
    pageIndex: 1, // 初始页码
    pageSize: 5, // 每页数量
    pageCount: 9, // 页码数量
    total: 100, // 数据总条数
    jumper: false, // 显示输入框跳转
    singlePageHide: false, // 只有一页时不显示分页
    prevText: '上一页', // 上一页文字
    nextText: '下一页', // 下一页文字
    disabled: true, // 是否显示禁用
    currentChange: function (index) {
      // 页码改变时回调
      console.log(index);
      // 重新发请求
    }
  });
})()





